<template>
	<view class="content-wapper">
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @clickLeft="openLeftSearch"
		@clickRight="openSettingAction" backgroundColor="#EFEFEF">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class="mx-1" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" 
				:class="tabIndex === index ? 'font-lg text-black' : 'font-md text-light-muted'">
					{{item.name}}
				</view>
			</view>
			<text slot="left" class="iconfont iconsousuo ml-2" style="font-size: 48rpx;"></text>
			<text slot="right" class="iconfont iconshaixuan" style="font-size: 48rpx;"></text>
		</uni-nav-bar>
		<view>
		<view class="circle-content">
		<view class="dashed-circle" :style="'margin:'+conerWidth+'px;'+'width:'+bigerWidth+'px;height:'+bigerWidth+'px;'">
			<view class="dashed-circle" :style="'margin:'+warpperWidth+'px;'+'width:'+middleWidth+'px;height:'+middleWidth+'px;'">
				<view class="dashed-circle" :style="'margin:'+warpperWidth+'px;'+'width:'+smallerWidth+'px;height:'+smallerWidth+'px;'">
					<view class="circle" :style="'margin:'+childWidth+'px;'+'--inner-radius:'+warpperWidth+'px;'"></view>
				</view>
			</view>
		</view>
		</view>
		<view class="box-content" style="margin-top: -78%">
			<image class="smaller-circle" src="../../static/demo/userpic/small10001.jpg"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10002.jpg" style="bottom:16rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10003.jpg"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10004.jpg" style="left:16rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10005.jpg" style="right:16rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10001.jpg" style="left:32rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10002.jpg" style="top:64rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10003.jpg" style="right:40rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10004.jpg" style="right:120rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10005.jpg" style="left:100rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle" src="../../static/demo/userpic/small10001.jpg" style="top:4rpx;"></image>
			<image class="smaller-circle"></image>
			<image class="smaller-circle"></image>
		</view>
		<view class="flex flex-column flex-1 align-center mt-2">
		<text class="font-sm text-dark mt-2">正在匹配中，合适的价格可以提高匹配率</text>
		<view class="flex align-center mt-2">
			<uni-countdown :show-day="false" :show-hour="false" :second="15" @timeup="pairtimeUp" />
		</view>
		<button type="primary" form-type="submit" class="submitBtn font py-1 bg-main" @click="cancelPairAction()">取消匹配</button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenWidth: 1080,
				bigerWidth: 720,
				middleWidth: 640,
				smallerWidth: 320,
				innerWidth:160,
				conerWidth:120,
				warpperWidth:80,
				childWidth:40,
				childrenWidth:20,
				tabBars: [{
					name: "推荐"
				}, {
					name: "匹配"
				}],
				tabIndex: 1,
			};
		},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.screenWidth = res.windowWidth;
				this.bigerWidth = res.windowWidth*0.7;
				this.middleWidth = res.windowWidth*0.5;
				this.smallerWidth = res.windowWidth*0.3;
				this.innerWidth = res.windowWidth*0.2;
				this.conerWidth = res.windowWidth*0.15;
				this.warpperWidth = res.windowWidth*0.1;
				this.childWidth = res.windowWidth*0.05;
				this.childrenWidth = res.windowWidth*0.025;
			},
		});
		// 初始化towerSwiper 传已有的数组名即可
	},
		methods: {
			cancelPairAction() {
			    uni.navigateBack({
			    	
			    });
			},
			openLeftSearch() {
			    uni.navigateTo({
			    	 url:"../search/search"
			    });
			},
			openSettingAction() {
			    
			},
			pairtimeUp() {
				this.navigateTo({
					url:"../modal-dialog/modal-dialog"
				});
			},
			// 切换选项卡
			changeTab(index) {
				// this.tabIndex = index
				if(index==0){
					uni.navigateBack({
						
					})
				}
			},
		}
	}
</script>

<style>
	
	.content-wapper {
		display: flex;
		/* margin-top: 20upx; */
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
	}
	.circle-content{
		flex: 1;
	}
	
	.dashed-circle {
		border-radius: 50%;
		text-align: center;
		border-width: 4rpx;border-style: dashed;border-color: #C9C9C9;
	}
	
	.border { border-width: 1rpx;border-style: solid;border-color: #6BBBFF;}
	
	.smaller-circle {
		margin: 20upx;
		border-radius: 32upx;
		width:64upx;
		height:64upx;
	}
	
	.box-content {
		margin: 15%  15% 0;
		width: 72%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: initial;
		justify-content: space-around;
		align-items: center;
	}
	
</style>